:root {
	box-sizing: border-box;
}

:root * {
	box-sizing: border-box;
}

/* Variables */
:root {
	/* Border radii */
	--tla-radius-1: 2px;
	--tla-radius-2: 4px;
	/* Fonts */
	--tla-font-ui:
		'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.tla {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	font-family: var(--tla-font-ui);
	background-color: var(--tla-color-sidebar);
	color: var(--tla-color-text-1);
}

.tla-theme__light {
	--tla-color-sidebar: hsl(0, 0%, 99%);
	--tla-color-tooltip: hsla(200, 14%, 4%, 1);
	--tla-color-canvas: hsl(210, 20%, 98%);
	--tla-color-panel: hsl(0, 0%, 100%);
	--tla-color-text-1: hsl(204, 8%, 5%);
	--tla-color-text-2: hsl(204, 2%, 20%);
	--tla-color-text-3: hsl(204, 4%, 45%);
	--tla-color-contrast: hsl(0, 0%, 100%);
	--tla-color-low: hsl(204, 16%, 94%);
	--tla-color-border: hsl(204, 16%, 85%);
	--tla-color-hover-1: hsl(204, 16%, 4%, 3%);
	--tla-color-hover-2: hsl(204, 16%, 4%, 4.5%);
	--tla-color-hover-3: hsla(0, 0%, 100%, 32.5%);
	--tla-color-overlay: hsla(240, 16%, 2%, 30%);
	--tla-color-cta: hsl(214, 92%, 50%);
	--tla-color-cta-hover: hsl(214, 92%, 53%);
	--tla-color-inactive: hsl(204, 4%, 55%);
	--tla-color-inactive-hover: hsl(204, 4%, 59%);
	--tla-color-primary: hsl(214, 84%, 56%);
	--tla-color-primary-hover: hsl(214, 84%, 58%);
	--tla-color-secondary: hsl(0, 0%, 92%);
	--tla-color-secondary-hover: hsl(0, 0%, 93.5%);
	--tla-color-secondary-border: hsl(0, 0%, 80%);
	--tla-color-accent-1: hsl(50, 91%, 70%);
	--tla-color-accent-2: hsl(28, 88%, 57%);
	--tla-color-accent-3: hsl(135, 59%, 49%);
	--tla-color-warning: hsl(0, 88%, 57%);
	--tla-color-drop-zone: hsl(204, 16%, 4%, 2.5%);
	/* Shadows */
	/* --tla-shadow-primary-highlight: inset 0px 4px 2px -4px hsl(214, 94%, 94%),
		inset 4px 4px 4px -6px hsl(214, 94%, 100%); */
	--tla-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
	--tla-shadow-2:
		0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),
		0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tla-color-contrast);
	--tla-shadow-3:
		0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),
		inset 0px 0px 0px 1px var(--tla-color-contrast);
	--tla-shadow-4:
		0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),
		0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tla-color-contrast);
}

.tla-theme__dark {
	--tla-color-sidebar: hsl(0, 0%, 5%);
	--tla-color-tooltip: hsla(0, 0%, 100%, 1);
	--tla-color-canvas: hsl(240, 5%, 6.5%);
	--tla-color-panel: hsl(240, 6%, 13%);
	--tla-color-text-1: hsl(204, 8%, 98%);
	--tla-color-text-2: hsl(204, 5%, 85%);
	--tla-color-text-3: hsl(204, 4%, 75%);
	--tla-color-contrast: hsl(0, 0%, 100%);
	--tla-color-low: hsl(240, 4%, 11%);
	--tla-color-border: hsl(240, 12%, 20%);
	--tla-color-hover-1: hsl(240, 8%, 100%, 3%);
	--tla-color-hover-2: hsl(240, 8%, 100%, 5%);
	--tla-color-hover-3: hsl(204, 16%, 4%, 3%);
	--tla-color-overlay: hsla(240, 0%, 0%, 81%);
	--tla-color-cta: hsl(214, 100%, 50%);
	--tla-color-cta-hover: hsl(214, 100%, 52%);
	--tla-color-inactive: hsl(204, 4%, 45%);
	--tla-color-inactive-hover: hsl(204, 4%, 49%);
	--tla-color-primary: hsl(214, 84%, 46%);
	--tla-color-primary-hover: hsl(214, 84%, 50%);
	--tla-color-secondary: hsl(0, 0%, 20%);
	--tla-color-secondary-hover: hsl(0, 0%, 22%);
	--tla-color-secondary-border: hsl(0, 0%, 25%);
	--tla-color-accent-1: hsl(50, 91%, 60%);
	--tla-color-accent-2: hsl(28, 88%, 47%);
	--tla-color-accent-3: hsl(135, 59%, 39%);
	--tla-color-warning: hsl(0, 95%, 65%);
	--tla-color-drop-zone: hsl(204, 16%, 4%, 2.5%);
	/* Shadows */
	/* --tla-shadow-primary-highlight: inset 0px 1px 1px -1px hsl(214, 94%, 72%),
		inset 4px 4px 4px -6px hsl(214, 94%, 80%); */
	--tla-shadow-1:
		0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
		inset 0px 0px 0px 1px var(--tla-color-panel);
	--tla-shadow-2:
		0px 1px 3px hsla(0, 44%, 27%, 0.666), 0px 2px 6px hsl(0, 0%, 0%, 33%),
		inset 0px 0px 0px 1px var(--tla-color-panel);
	--tla-shadow-3:
		0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),
		inset 0px 0px 0px 1px var(--tla-color-panel);
}

.tla-focus-mode .tl-watermark_SEE-LICENSE {
	visibility: hidden;
}

.tla .tl-container {
	font-family: var(--tla-font-ui);
	font-size: 12px;
	font-weight: 500;
}

/* ---------------------- Text ---------------------- */

.tla-text_ui__title {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0.2px;
	position: relative;
	top: 1px;
	font-family: var(--tla-font-ui);
	color: var(--tla-color-text-1);
}

.tla-text_ui__section {
	font-size: 12px;
	line-height: 1.3;
	font-weight: 500;
	font-family: var(--tla-font-ui);
	color: var(--tla-color-text-3);
}

.tla-text_ui__tiny {
	font-size: 6px;
	line-height: 1.3;
	font-weight: 800;
	font-family: var(--tla-font-ui);
	color: var(--tla-color-text-1);
}

.tla-text_ui__small {
	font-size: 11px;
	line-height: 1.3;
	font-weight: 500;
	font-family: var(--tla-font-ui);
	color: var(--tla-color-text-3);
}

.tla-text_ui__medium {
	font-size: 12px;
	line-height: 1.3;
	font-weight: 500;
	font-family: var(--tla-font-ui);
}

.tla-text_ui__regular {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 500;
	font-family: var(--tla-font-ui);
}

.tla-text_ui__big {
	font-size: 24px;
	line-height: 1.3;
	font-family: var(--tla-font-ui);
	color: var(--tla-color-text-1);
	text-rendering: optimizeLegibility;
}

/* ---------------------- Auth ---------------------- */

.tla-auth_detail {
	text-align: center;
	color: var(--tla-color-text-3);
}

.tla-auth_detail button {
	background: none;
	border: none;
	display: inline;
	cursor: pointer;
	color: var(--tla-color-primary);
}

.tla-file-header__share {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* --------------------- Editor --------------------- */

.tlui-layout__top {
	display: grid;
	grid-template-columns: 1fr auto;
	height: fit-content;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	gap: 12px;
}

.tlui-layout__top__left {
	grid-row: 1;
	grid-column: 1;
	max-width: 100%;
	min-width: 0px;
	height: auto;
	position: relative;

	/* Stop helper buttons getting cut off by the top right panel */
	overflow: visible;
}

.tlui-layout__top__right {
	grid-row: 1;
	grid-column: 2;
	flex: 0 1;
	height: auto;
	width: fit-content;
	max-width: 100%;
	min-width: 0px;
	overflow: hidden;
}

.tlui-page-menu__trigger {
	width: fit-content;
	max-width: 128px;
}

@media (min-width: 640px) {
	.tlui-page-menu__trigger {
		width: fit-content;
		max-width: 320px;
	}
}

/* Hide the icon on the page menu trigger button */

.tlui-page-menu__trigger .tlui-button__icon {
	display: none;
}

/* Fix the location of the focus button */

.tlui-focus-button {
	width: 40px;
	margin-top: 4px;
	margin-left: 4px;
}

.tla-theme-container {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
}

.tla-lang-highlight-missing *:not(.notranslate) {
	text-shadow: 3px 3px red;
}

/* TODO: the .tlui-menu rule is too broad, it should be more specific */
.tla-lang-highlight-missing .tla-editor *,
.tla-lang-highlight-missing .tlui-menu *,
.tla-lang-highlight-missing .notranslate,
.tla-lang-highlight-missing .notranslate *,
.tla-lang-highlight-missing .i18n-msg,
.tla-lang-highlight-missing .i18n-msg * {
	text-shadow: none;
}

/* --------------------- a11y --------------------- */

/** Buttons/A tags */
.tla:has(.tl-container__focused:not(.tl-container__no-focus-ring))
	:is(nav, .tlui-menu, .tlui-popover__content, .tlui-dialog__overlay)
	button:not(.tla-button-text):focus-visible,
.tl-container__focused:not(.tl-container__no-focus-ring) button:not(.tlui-button):focus-visible,
.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-layout__top a:focus-visible {
	outline: 2px solid var(--tl-color-focus);
}

/** We use tldraw components in some places, and menu sub-groups with checkbox items are also here. */
.tla:has(.tl-container__focused:not(.tl-container__no-focus-ring))
	:is(.tlui-menu, .tlui-menu__group)
	.tlui-button__menu:focus-visible {
	border-radius: 10px;
	outline: 2px solid var(--tl-color-focus);
	outline-offset: -5px;
}

/** Checkbox */
.tla:has(.tl-container__focused:not(.tl-container__no-focus-ring))
	:is(nav, .tlui-popover__content, .tlui-dialog__overlay)
	.tla-form-checkbox:has(input:focus-visible)
	> label {
	outline: 2px solid var(--tl-color-focus);
}

/** Text buttons, specifically from the cookie consent */
.tla:has(.tl-container__focused:not(.tl-container__no-focus-ring)) nav a:focus-visible,
.tla:has(.tl-container__focused:not(.tl-container__no-focus-ring))
	nav
	.tla-button-text:focus-visible {
	outline: 2px solid var(--tl-color-focus);
}

/** Primary buttons in the top area (e.g. Share, Sign in) */
.tla:has(.tl-container__focused:not(.tl-container__no-focus-ring))
	nav
	.tla-primary-button:not(.tlui-button):focus-visible,
.tl-container__focused:not(.tl-container__no-focus-ring)
	.tla-primary-button:not(.tlui-button):focus-visible {
	outline-offset: 0;
}
